<template>
  <div>
    <div class="nav">
      <img src="@/assets/log.png" alt="" />
      <span class="title">博客系统</span>
      <span class="spacer"></span>
      <router-link to="/blog_list">主页</router-link>
      <router-link to="/blog_edit">写博客</router-link>
      <router-link to="/blog_login">注销</router-link>
    </div>

    <div class="blog-edit-container">
      <div class="title">
        <input type="text" v-model="title" placeholder="在这里写下文章标题" />
        <input type="button" value="发布文章" @click="submitArticle" />
      </div>
      <div id="editor"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import $ from 'jquery'
import 'editor.md-master/css/editormd.min.css'
import '@/assets/css/common.css'
import '@/assets/css/blog_edit.css'

// 引入 editor.md 脚本资源（需确保这些文件已在 public 或通过 Vite 插件支持）
import 'editor.md-master/lib/marked.min'
import 'editor.md-master/lib/prettify.min'
import 'editor.md-master/editormd.min'

const title = ref('')
let editor = null

onMounted(() => {
  editor = window.editormd('editor', {
    width: '100%',
    height: '500px',
    markdown: '# 在这里写下一篇博客',
    path: 'editor.md-master/lib/'
  })
})

const submitArticle = () => {
  const content = editor.getMarkdown().trim()
  if (!title.value || !content) {
    alert('请填写文章标题和内容！')
    return
  }


    axios.post('/api/blog', { title: title.value, content }).then(alert('发布成功！'))
}
</script>

<style scoped>
.blog-edit-container {
    width: 1000px;
    height: calc(100% - 50px);
    margin: 0 auto;
}

/* 标题编辑区 */
.blog-edit-container .title {
    margin-top: 20px;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blog-edit-container .title #title {
    width: 795px;
    height: 50px;
    border-radius: 10px;
    padding-left: 20px;
    border: none;
    outline: none;
    background-color: rgba(41, 83, 149, 0.3);
    font-size: 15px;
}

.blog-edit-container .title #submit {
    width: 200px;
    height: 50px;
    border-radius: 10px;
    border: none;
    outline: none;
    background-color: rgba(255, 192 , 153, 0.4);
    font-size: 20px;
}

.blog-edit-container .title #submit:active {
    background-color: rgba(41, 83, 149, 0.3);
}

#editor {
    border-radius: 10px;
    border: none;
    opacity: 0.7;
}
</style>
